import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];
const items: MenuItem[] = [
    {
        label: '栏目1',
        key: '/page1',
        icon: <PieChartOutlined />
    },
    {
        label: '栏目2',
        key: '/page2',
        icon: <DesktopOutlined />
    },
    {
        label: '栏目3',
        key: '/page3',
        icon: <UserOutlined />,
        children:[
            {
                label: '栏目 301',
                key: '/page3/page301'
            },
            {
                label: '栏目 302',
                key: '/page3/page302'
            },
            {
                label: '栏目 303',
                key: '/page3/page303'
            }
        ]
    },
    {
        label: '栏目4',
        key: '/page4',
        icon: <TeamOutlined />,
        children:[
            {
                label: '栏目 401',
                key: '/page3/page401'
            },
            {
                label: '栏目 402',
                key: '/page3/page402'
            }
        ]
    },
    {
        label: '栏目5',
        key: '/page5',
        icon: <FileOutlined />
    },
]
// function getItem(
//   label: React.ReactNode,
//   key: React.Key,
//   icon?: React.ReactNode,
//   children?: MenuItem[]
// ): MenuItem {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   } as MenuItem;
// }

// const items: MenuItem[] = [
//   getItem("Option 1", "/page1", <PieChartOutlined />),
//   getItem("Option 2", "/page2", <DesktopOutlined />),
//   getItem("User", "page3", <UserOutlined />, [
//     getItem("Tom", "3"),
//     getItem("Bill", "4"),
//     getItem("Alex", "5"),
//   ]),
//   getItem("Team", "page4", <TeamOutlined />, [
//     getItem("Team 1", "6"),
//     getItem("Team 2", "8"),
//   ]),
//   getItem("Files", "9", <FileOutlined />),
// ];

const Comp: React.FC = () => {
  const navigateTo = useNavigate();
  const currentRoute = useLocation()
  console.log('1', currentRoute.pathname)
  const menuClick = (e: { key: string }) => {
    // 编程式导航
    navigateTo(e.key);
  };

 let firstOpenKey:string = ''
  // 在这里进行对比
  function findKey(obj:{key:string}) {
      return obj.key === currentRoute.pathname
  }
  // 多对比的是多个children
  for(let i=0; i<items.length; i++){
      // 判断找到找不到
      // items[i]['children'].find(findKey)这结果如果找到拿到的，就是找到的这个对象，转布尔值就是true,如果找不到转布尔值就是false
      // ! 断言 肯定有 item[i]不为空
      if(items[i]!['children'] && items[i]!['children'].length > 0 && items[i]!['children'].find(findKey)){
          firstOpenKey = items[i]!.key as string
          break
      }
  }

  const [openKeys, setOpenKeys] = useState([firstOpenKey]);
  // 展开收缩
  const handleOpenChange = (keys: string[]) => {
    setOpenKeys([keys[keys.length - 1]]);
  };
  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={[currentRoute.pathname]}
      mode="inline"
      items={items}
      onClick={menuClick}
      onOpenChange={handleOpenChange}
      openKeys={openKeys}
    />
  );
};

export default Comp;
